<template>
    <div id="main" style="width: 100%;height: 80vh;"></div>
</template>

<script>
    export default {
        components: {},
        props: {},
        data() {
            return {
                option : {
                    legend: {
                        top: 'top'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    series: [
                        {
                            name: 'Your Nightingale Chart',
                            type: 'pie',
                            radius: [50, 250],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },

                        }
                    ]
                }
            };
        },
        watch: {},
        computed: {},
        methods: {
          async getData() {
            try {
              // 确保 URL 正确（根据实际配置调整）
              const { data: res } = await this.$http.get('http://127.0.0.1:8086/init/getIllness');
              // console.log("接口返回数据:", res);
              // 根据实际返回结构调整赋值逻辑
              this.option.series[0].data = res.data || res;
              this.init();
            } catch (error) {
              console.error("请求失败:", error.response?.data || error.message);
              this.$message.error("数据加载失败，请联系管理员！");
            }
          },
          init() {
            let myChart = this.$echarts.init(document.getElementById("main"));
            myChart.setOption(this.option);
          }
        },
        created() {
        },
        mounted() {
            this.getData();
        }
    };
</script>
<style>

</style>
